<template>
  <div>
     <div class="head">
        <div class="top">
          <div class="img">
            <open-data  type="userAvatarUrl"></open-data>
          </div>
          <div class="username">
            <open-data type="userNickName" open-gid="xxxxxx"></open-data>
          </div>
          <div class="sign">
            <div class="No" v-if="!isSuccess">
              未签到
            </div>
            <div class="Is" v-if="isSuccess">
              已签到
            </div>
          </div>
        </div>
        <div class="bottom">
            <div class="DayAndNum">
              <div class="all">
                <div class="blockAll" data-index="0">
                    <h4>连续签到</h4>
                    <span>{{signdays}}</span>
                </div>
                <div class="blockAll" data-index="1">
                    <h4>今日排行</h4>
                    <span>{{morningrank}}</span>
                </div>
                <div class="blockAll" data-index="2">
                    <h4>总积分</h4>
                    <span>{{totalscore}}</span>
                </div>
              </div>
            </div>
        </div>
     </div>
     <div class="recoveTitle">
        <img src="http://image.myzhbit.cn/myzhbit/Getup/record.png">
        <div class="userdata">
          <div class="tr">
            <div class="th" style="width: 25%">签到时间</div>
            <div class="th" style="width:60rpx"></div>
            <div class="th">签到积分</div>
            <div class="th">连签加分</div>
          </div>
        </div>
     </div>
     <scroll-view scroll-y class="scoll-look">
      <div class="user">
        <div class="date">
          <div v-for="(item,key,index) in datedata" :key="index" class="datetr">
            <div class="datetd" v-if="item.rank==0">{{item.date}}</div>
            <div class="datetd" style="color:rgb(245,111,97)" v-if="item.rank<11 && item.rank!=0">{{item.date}}</div>
            <div class="datetd" v-if="item.rank>10">{{item.date}}</div>
          </div>
        </div>
        <div class="table">
          <div v-for="(item,key,user) in datedata" :key="user" class="tr">
            <div class="tdnorank" style="width: 25%" v-if="item.rank==0">未签到</div>
            <div class="tdrank" style="width:60rpx;" v-if="item.rank==0"></div>
            <div class="tdscore" v-if="item.rank==0">0</div>
            <div class="tdsignscore" v-if="item.rank==0">+0</div>

            <div class="td" style="color:rgb(245,111,97);width: 25%" v-if="item.rank<11 && item.rank!=0">{{item.time}}</div>
            <div class="tdrank" style="color:rgb(156,210,235);" v-if="item.rank<11 && item.rank!=0">前十</div>
            <div class="td" style="color:rgb(245,111,97);" v-if="item.rank<11 && item.rank!=0">{{item.score}}</div>
            <div class="td" style="color:rgb(245,111,97);" v-if="item.rank<11 && item.rank!=0">{{item.signscore}}</div>

            <div class="td" style="width: 25%" v-if="item.rank>10">{{item.time}}</div>
            <div class="tdrank" style="width:60rpx;" v-if="item.rank>10"></div>
            <div class="td" v-if="item.rank>10">{{item.score}}</div>
            <div class="td" v-if="item.rank>10">{{item.signscore}}</div>
          </div>
        </div>
      </div>
     </scroll-view>
  </div>
</template>


<script>
export default {
  data() {
    return {
       avatarUrl:"",
       username:"",
       signdays:"",
       morningrank:"",
       totalscore:"",
       datedata:"",
       rank:" ",
       isSuccess:false,
       key:"3rd_session",
    }
  },
  methods: {
    //微信API
    getuserinfo(){
        return new Promise(function (resolve, reject) {
        wx.getUserInfo({
            success: function (res) {
                resolve(res);
            },
            fail: function (res) {
                reject(res);
            },
        });
        });
    },
    getstorage(key){
        return new Promise(function (resolve, reject) {
        wx.getStorage({
            key:key,
            success: function (res){
                resolve(res);
            }
        })
    });
    },
    setrequst(url,session){
        return new Promise(function (resolve, reject){
        wx.request({
            url: url,
            method: 'POST',
            data: {
              session: session,
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
                resolve(res);
                //console.log(res);
            },
            fail: function (res) {
                reject(res);
                //console.log(res);
            },
        });
        });
    },

  },
  
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(){
  }, 

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(){
     try {
      var that = this;
      wx.showToast({
        title: '加载中',
        icon: "loading",
        mask:'true',
        duration: 500,
        complete:function(){
            that.getstorage(that.key)
            .then((res) => {
              that.session = res.data
              var url = 'https://myzhbit.cn/getup/web/index.php?r=user/userdata';
              return that.setrequst(url,that.session);
            })
            .then((res) => {
              that.username = res.data.data.nickName;
              that.avatarUrl = res.data.data.avatarUrl;
              that.signdays = res.data.data.onsign;
              that.morningrank = res.data.data.morningrank;
              that.totalscore = res.data.data.totalscore;
              that.isSuccess = res.data.data.usersign;
              var url = "https://myzhbit.cn/getup/web/index.php?r=user/signrecord";
              return that.setrequst(url,that.session);
            })
            .then((res) => {
              that.datedata = res.data.data;
              //console.log(that.datedata);
            })
        }
      });
    } catch (e) {
        // Do something when catch error
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    
  },
}
</script>


<style lang="scss" scoped>
  @import "./person";
</style>


